<template>
  <a-menu
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="horizontal"
    class="nav"
  >
    <a-menu-item key="1">
      <router-link to="/">Home</router-link>
    </a-menu-item>
    <a-sub-menu key="sub4">
      <template #title><router-link to="/">Product</router-link></template>
      <a-menu-item :key="item.name" v-for="item in productFirst" @click="goToDetails(item.id)">{{item.name}}</a-menu-item>
    </a-sub-menu>
    <a-menu-item key="3">
      <router-link to="/solutions">Solutions</router-link>
    </a-menu-item>
    <a-sub-menu key="sub1">
      <template #title><router-link to="/support">Support</router-link></template>
      <a-menu-item key="5"> <router-link to="/support/question">FAQ</router-link></a-menu-item>
      <a-menu-item key="7"> <router-link to="/support/maintenance">Maintenance</router-link></a-menu-item>
      <a-menu-item key="6"> <router-link to="/support/train">Training</router-link></a-menu-item>
      <a-menu-item key="8"> <router-link to="/support/download">Download</router-link></a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="sub2">
      <template #title><router-link to="/about">About</router-link></template>
      <a-menu-item key="9"><router-link to="/about/company">Company</router-link></a-menu-item>
      <a-menu-item key="10"><router-link to="/about/new">News</router-link></a-menu-item>
      <a-menu-item key="11"><router-link to="/about/team">Team</router-link></a-menu-item>
      <a-menu-item key="13"><router-link to="/about/careers">Career</router-link></a-menu-item>
      <a-menu-item key="12"><router-link to="/about/partners">Partner</router-link></a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="sub3">
      <template #title><router-link to="/contact">Contact</router-link></template>
      <a-menu-item key="16"><router-link to="/contact/us">Us</router-link></a-menu-item>
      <a-menu-item key="15"><router-link to="/contact/distributors">Distributors</router-link></a-menu-item>
      <a-menu-item key="16"><router-link to="/contact/trade">Tradeshow</router-link></a-menu-item>
      <a-menu-item key="14"><router-link to="/contact/message">Send Message</router-link></a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
<script>
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
import {getCategoryList} from "../api/product";
import {useRouter} from "vue-router";
export default defineComponent({
  setup() {
    const router = new useRouter()
    const state = reactive({
      selectedKeys: [],
      openKeys: [],
    });
    let productFirst = ref([])
    onMounted(()=>{
      getCategoryList().then((res)=>{
        if(res && res.code === 200){
          productFirst.value = res.data
        }
      })
    })

    const goToDetails = (id)=>{
      if(id){
        router.push({path:`/product/type/${id}`});
      }
    }

    return { ...toRefs(state), productFirst, goToDetails };
  },
});
</script>
<style lang="scss" scoped>
.nav{
  background-color: black;
  color:#ffb81c;
  border-bottom:none;
  li{
    height:85px;
    line-height:85px;
    a{
      color:#ffb81c;
    }
  }
  ::v-deep .ant-menu-item{
    height:85px;
    line-height:85px;
    a{
      color:#ffb81c;
    }
  }
}
</style>
